* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	width:100%;
} 
ul {
	li {
		list-style: none;

		a {
			text-decoration: none;
		}
	}
}

header {
	position: sticky;
	top: 0;
	z-index: 9;
}

#header {
	position: sticky;
	top: 0;
	z-index: 9;
}

#container {
	overflow-x: hidden;

	// display: flex;
	// flex-direction: column;
	// height: 100vh;
	#header {
		position: sticky;
		top: 0;
		z-index: 9;
	}

	#content {
		max-width: 1280px;
		margin: 0 auto;
		min-height: calc(100vh - .34896rem);
		position: relative;

		.product-head {
			display: flex;
			padding: 3.22917rem 0 3.44792rem;

			.left-img {
				// width: 384px;
				margin-right: 40px;
				display: flex;

				.lagre-img {
					border: 1px solid #cbcbcb;
					width: 450px;
					height: 100%;
					margin-right: 20px;
				}

				.img-list {
					display: flex;
					flex-direction: column;
					height: 100%;
					// justify-content: space-between;
					margin-right: 20px;

					.img-group {
						// width: 80px;
						// height: 80px;
						padding: 5px;
						border: 1px solid #cbcbcb;
						cursor: pointer;
						margin-bottom: 15px;

						.img-li {
							width: 60px;
							height: 60px;
						}
					}

					.is-active {
						border: 1px solid #177fef;
					}
				}
			}

			.right-word {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.top {
					font-size: 1.5rem;
					font-weight: 700;
					color: #115899;
					margin-bottom: 20px;
				}

				.center {
					font-size: 16px;
					color: #000000;
					/* white-space: pre-wrap; */
					line-height: 1.5rem;
					text-align: left;
					height: 9.375rem;
					overflow: auto;
					margin-bottom: 20px;
				}

				.down {
					.tips {
						font-size: 1.5rem;
						font-weight: 700;
						color: #115899;
						margin-bottom: 40px;
					}

					.icon-list {
						display: flex;
						justify-content: space-around;

						.list {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 25%;
							border-right: 1px solid #cbcbcb;
							padding: 10px;
							flex-wrap: wrap;

							&:last-child {
								border: none;
							}

							cursor: pointer;

							.icon {
								color: #115899;
								font-size: 70px;

							}

							.list-tips {
								margin-top: 20px;
								font-size: 18px;
								color: #3d3a3a;
							}
						}
					}
				}
			}
		}

		@media (max-width:768px) {
			.product-head {
				transition: .3s;
				display: flex;
				flex-direction: column;
				padding: 0 0 3.44792rem;

				.left-img {
					// width: 384px;
					border: none;
					// margin-right: 40px;
					margin-right: 0;
					display: flex;
					flex-direction: column;
					text-align: center;

					.lagre-img {
						width: 100%;
					}

					.img-list {
						display: flex;
						flex-direction: row;
						width: 100%;

						.img-group {
							width: 25%;
							height: 100px;
						}

						.img-li {
							width: 100% !important;
							height: 100% !important;
						}
					}

				}
			}
		}

		@media (max-width:900px) {
			.product-head {
				transition: .3s;
				display: flex;
				flex-direction: column;
				padding: 0 0 3.44792rem;

				.left-img {
					// width: 384px;
					border: none;
					// margin-right: 40px;
					margin-right: 0;
					text-align: center;

					img {
						width: 60%;
						height: 100%;
					}
				}

				.right-word {
					margin: 0 20px;

					.center {
						margin-bottom: 20px;
					}

					.down {
						.icon-list {
							display: flex;
							justify-content: space-around;

							.list {
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 25%;
								border-right: 1px solid #cbcbcb;
								text-align: center;

								&:last-child {
									border: none;
								}

								cursor: pointer;

								.icon {
									color: #115899;
									font-size: 50px;

								}

								.list-tips {
									margin-top: 20px;
									font-size: 15px;
									color: #3d3a3a;
									word-wrap: break-word;
									word-break: normal;
									width: 100%;
								}
							}
						}
					}
				}
			}

			.product-down {
				margin: 0 20px;
			}
		}


		.table-container {
			max-width: 100%;
			padding: 15px;
			text-align: center;

			.center-head {
				color: #115899;
				display: inline-block;
				margin-bottom: 20px;

				.tips {
					margin-bottom: 10px;
				}

				&::after {
					content: '';
					width: 50px;
					height: 5px;
					background-color: #115899;
					display: block;
					margin: 0 auto;
				}
			}
		}

		.table-title {
			text-align: center;
			margin-bottom: 15px;
		}

		.table-title h2 {
			font-size: 18px;
			margin-bottom: 5px;
		}

		/* 搜索栏 */
		.search-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 10px;
			margin-bottom: 20px;
			padding: 0 16px;
		}

		.search-input {
			// flex: 1;
			width: 200px;
			padding: 8px 15px;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
		}

		.search-btn,
		.reset-btn {
			padding: 8px 15px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.search-btn {
			background-color: #409eff;
			color: white;
		}

		.reset-btn {
			background-color: #f5f5f5;
			color: #333;
		}


		/* 表格外层容器 */
		.table-responsive {
			position: relative;
			width: 100%;
			overflow: hidden;
		}

		/* 桌面端表格样式 */
		.data-table {
			width: 100%;
			border-collapse: collapse;
			color: #333;
			font-size: 14px;
			thead {
				background-color: #175997;
			}
		}

		.data-table th,
		.data-table td {
			padding: 10px 15px;
			text-align: left;
			border-bottom: 1px solid #eee;
		}
		.data-table td{
			width: 10px;
		}

		.data-table th {
			background-color: #175997;
			font-weight: normal;
			color: #fff;

		}

		.data-table tr:hover {
			background-color: #f5f5f5;
		}

		.data-table tr:nth-child(odd) {
			background: #fff;
		}
		.data-table tr:nth-child(even) {
			background: #edf6ff;
		}

		/* 手机端样式 */
		@media (max-width: 768px) {
			.table-responsive {
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
			}

			.search-container {
				flex-direction: column;
				align-items: stretch;

				#searchInput {
					width: 100% !important;
				}
			}

			.data-table {
				min-width: 600px;
				/* 确保表格足够宽 */
			}

			/* 固定第一列 */
			.fixed-column {
				position: sticky;
				left: 0;
				background-color: white;
				z-index: 2;
				box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
			}

			/* 表头固定 */
			.data-table thead th {
				position: sticky;
				top: 0;
				z-index: 3;
				background-color: #175997;
			}

			/* 第一列表头特殊样式 */
			.data-table thead th.fixed-column {
				z-index: 4;
			}
		}

		/* 操作按钮 */
		.btn {
			padding: 6px 12px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.btn-primary {
			background-color: #4285f4;
			color: white;
		}

		.btn-default {
			background-color: #f1f1f1;
			color: #333;
		}

		/* 分页样式 */
		.pagination {
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}

		.page-item {
			margin: 0 5px;
		}

		.page-link {
			padding: 6px 12px;
			border: 1px solid #ddd;
			background-color: white;
			cursor: pointer;
		}

		.page-link.active {
			background-color: #4285f4;
			color: white;
			border-color: #4285f4;
		}

		/* 加载状态 */
		.loading {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.8);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
		}

		/* 空状态 */
		.empty-state {
			text-align: center;
			padding: 30px;
			color: #777;
		}

		.product-center {
			text-align: center;

			.center-head {
				color: #115899;
				display: inline-block;
				margin-bottom: 20px;

				.tips {
					margin-bottom: 10px;
				}

				&::after {
					content: '';
					width: 50px;
					height: 5px;
					background-color: #115899;
					display: block;
					margin: 0 auto;
				}
			}

			.center-img {
				img {
					width: 100% !important;
					height: auto !important;
				}
			}
		}

		.product-down {
			text-align: center;
			margin-bottom: 40px;

			.down-head {
				color: #115899;
				display: inline-block;
				margin-bottom: 20px;

				.tips {
					margin-bottom: 20px;
				}

				&::after {
					content: '';
					width: 50px;
					height: 5px;
					background-color: #115899;
					display: block;
					margin: 0 auto;
				}
			}

			.down-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.list {
					width: 30%;
					margin-bottom: 20px;

					a {
						text-align: center;
						color: #282828;

						.list-top {
							font-size: 18px;
							font-weight: 700;
						}

						.list-down {
							font-size: 14px;
						}

						.image {
							width: 100%;
							border: 1px solid #AAAAAA;
							height: 150px;
							object-fit: contain;
						}
					}
				}
			}
		}

		// .modal {
		//   display: none;
		//   position: fixed;
		//   top: 0;
		//   left: 0;
		//   z-index: 10;
		//   width: 100%;
		//   height: 100%;
		//   background-color: rgba(0, 0, 0, .2);
		//   border-radius: 5px 5px 0 0;
		// 	.modal-content {
		// 		position: fixed;
		// 		top: 50%;
		// 		left: 50%;
		// 		// width: 320px;
		// 		// height: 320px;
		// 		border: 1px solid #ccc;
		// 		margin-top: -160px;
		// 		margin-left: -160px;
		// 		background-color: #fff;
		// 		border-radius: 5px;
		// 		padding: 20px;
		// 		.modal-head{
		// 			display: flex;
		// 			justify-content: space-between;
		// 			margin-bottom: 20px;
		// 			.head-right{
		// 				color: #999;
		// 				cursor: pointer;
		// 			}
		// 		}
		// 		.modal-center{
		// 			text-align: center;
		// 			.no-data{
		// 				display: flex;
		// 				flex-direction: column;
		// 				justify-content: center;
		// 				align-items: center;
		// 				margin: 80px;
		// 				.fi{
		// 					font-size: 100px;
		// 					color: #f2f3f5;
		// 					margin-bottom: 10px;
		// 				}
		// 			}
		// 			.has-data{
		// 				.data-list{
		// 					display: flex;
		// 					align-items: center;
		// 					border-bottom: 1px solid #ebebeb;
		// 					padding-bottom: 10px;
		// 					margin-bottom: 10px;
		// 					.data-right-btn{
		// 						padding: 5px 10px;
		// 						background-color:#409eff;
		// 						color: #fff;
		// 						text-align: center;
		// 						margin-left: 20px;
		// 						border-radius: 5px;
		// 					}
		// 				}

		// 			}
		// 		}
		// 	}
		// }
		.connect-down {
			text-align: center;
			margin-bottom: 40px;

			.down-head {
				color: #115899;
				display: inline-block;
				margin-bottom: 20px;

				.tips {
					margin-bottom: 10px;
				}

				&::after {
					content: '';
					width: 50px;
					height: 5px;
					background-color: #115899;
					display: block;
					margin: 0 auto;
				}
			}

			.form-coup {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.input-coup {
					width: 30%;
					height: 30px;
					border: 1px solid #d8d8d8;
					padding-left: 10px;
					outline: none;
					margin-bottom: 20px;
				}

				.select-coup {
					width: 30%;
					height: 30px;
					outline: none;
					border: 1px solid #d8d8d8;
				}

				.select-all {
					width: 30%;
					height: 30px;
					display: flex;
					justify-content: space-between;

					.select-one {
						outline: none;
						border: 1px solid #d8d8d8;
						width: 45%;
					}
				}
			}

			.text-area {
				width: 100%;
				margin-bottom: 20px;

				.talk-about {
					width: 100%;
					outline: none;
					border: 1px solid #d8d8d8;
					padding: 10px;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				padding: 10px 20px;
				background: #177FEF;
				border-radius: 15px;
				text-align: center;
				color: #fff;
				border: none;
				outline: none;
				cursor: pointer;
			}
		}

	}

	#footer {
		margin-top: auto;
	}

	@media (max-width:68.75rem) {
		#footer {
			transition: .3s;
			display: none;
		}

		#rightside {
			transition: .3s;
			display: none;
		}
	}
}

footer {
	margin-top: auto;
}

@media (max-width:68.75rem) {
	footer {
		transition: .3s;
		display: none;
	}

	#rightside {
		transition: .3s;
		display: none;
	}
}